/* RESET
----------------------------------------------------------*/
* {
	margin: 0;
	padding: 0;
}

ul { list-style-type: none; }

a { text-decoration: none; }

p { margin-bottom: 12px; }

img { border: none; }

body {
	background-color: #efebe8;
	font-family: Arial;
}

.container {
	width: 980px;
	margin: 0 auto;
}

#main {
	background: url('../image/bg-header.jpg') repeat-x;
	min-height: 600px;
}

/* HEADER
----------------------------------------------------------*/
#header {
	position: relative;
	height: 130px;
	margin-bottom: 20px;
}

#logo {
	position: absolute;
	top: 15px;
	color: White;
	font-weight: bold;
	font-family: Courier New;
}

#menu {
	position: absolute;
	top: 82px;
	overflow: hidden;
}

#menu li {
	float: left;
	margin-right: 3px;
}

#menu li a {
	display: block;
	background: url('../image/menu-item.jpg') no-repeat;
	line-height: 40px;
	height: 40px;
	width: 162px;
	
	font-weight: bold;
	font-size: 13px;
	color: Black;
}

#menu li a img {
	margin-left: 10px;
	margin-right: 15px;
	vertical-align: middle;
}

.home .home,
.employee .employee,
.department .department {
	background: url('../image/menu-active.jpg') no-repeat !important;
	height: 42px !important;
}

/* CONTENT
----------------------------------------------------------*/
#content {
	overflow: hidden;
}

#content .secondary {
	float: left;
	width: 170px;
	margin-right: 20px;
}

#content .primary {
	float: left;
	width: 750px;
	margin-right: 20px;
}

/* FOOTER
----------------------------------------------------------*/
#footer
{
	background: url('../image/bg-footer.jpg') repeat-x;
	height: 45px;
	padding-top: 20px;
	color: White;
	font-weight: bold;
	font-size: 12px;
}

/* SECONDARY
----------------------------------------------------------*/
ul.secondary-list {
	padding: 10px;
}

.secondary-list li {
	border-bottom: solid 1px #cccccc;
	padding-left: 5px;
	padding-bottom: 5px;
	margin-bottom: 5px;
}

.secondary-list li a {
	font-family: Calibri;
	color: Black;
}

.secondary-list li a:hover {
	color: #A52A2A;
}

.secondary-list li:last-child {
	border-bottom: none;
}

/* PRIMARY
----------------------------------------------------------*/
.tablist {
	background-color: #F3F3F3;
	border-collapse: collapse;
	width: 100%;
}

.tablist td, .tablist th {
	font-family: Tahoma;
	font-size: 13px;
	text-align: left;
	padding: 3px;
	border: solid 1px #cccccc;
}

.tablist th {
	background-color: #E4E1DF;
}

.tablist tr.selected {
	background-color: #AFCCF5;
}

/* PAGING
----------------------------------------------------------*/
.pagination {
	overflow: hidden;
}

.pagination li {
	float: left;
	margin-right: 5px;
	font-size: 12px;
}

.pagination li.current {
	padding: 2px 4px;
}

.pagination a {
	display: block;
	border: solid 1px #c0bcbb;
	padding: 1px 4px;
	color: black;
}

.pagination a:hover {
	background-color: Gray;
	color: White;
}

.pagination a[rel="prev"],
.pagination a[rel="next"],
.pagination a[rel="first"],
.pagination a[rel="last"] {
	border: none;
}

.pagination a[rel="prev"]:before, .pagination a[rel="first"]:before {
	content: "\00AB";
	padding-right: 0.5em;
}

.pagination a[rel="next"]:after, .pagination a[rel="last"]:after {
	content: "\00BB";
	padding-left: 0.5em;
}

/* BOX
----------------------------------------------------------*/
.box {
	background: url('../image/box-header.jpg') repeat-x;
	border: solid 1px #CAC5C2;
	background-color: #e4e1df;
	margin-bottom: 20px;
}

.box-inside .heading,
.box-inside .content {
	padding: 10px;
}

.box-inside h2 {
	font-size: 18px;
	display: inline-block;
}

.box-inside {
	border: solid 1px white;
}

.buttons {
	float: right;
	/*margin-right: 10px;*/
}

.box-footer {
	padding: 3px;
	padding-top: 4px;
}


/* FORM
----------------------------------------------------------*/
form {
	font-family: Verdana;
	font-size: 13px;
}

form fieldset {
	border: none;
	margin-bottom: 10px;
}

.button {
	background: #2A2A2A url('../image/button.gif') repeat-x;
	border-radius: 3px;
	border: 1px solid #272727;
	text-shadow: 1px 1px 0 #000000;
	color: White;
	font-weight: bold;
	padding: 3px 6px;
	cursor: pointer;
	display: inline-block;
}

.field {
	margin-bottom: 12px;
}

.label {
	display: inline-block;
	width: 90px;
}

.input {
	display: inline-block;
	position: relative;
}

.hint {
	position: absolute;
	right: -250px;
	top: 0px;
	display: none;
	width: 200px;
	
	padding: 5px;
	border: solid 1px #CC9933;
	background: #FFFFCC url('../image/pointer.png') no-repeat -20px 6px;
	
	font-size: 8pt;
	font-style: italic;
}

.hint .pointer {
	position: absolute;
	left: -20px;
	top: -5px;
	width: 20px;
	height: 20px;
	display: block;
	background: url('../image/pointer.png') no-repeat left 6px;
}

input[type="text"] {
   	border: solid 1px #cccccc;
   	background: url('../image/bg-textbox.jpg') repeat-x;
   	line-height: 23px;
   	height: 23px;
   	padding-left: 5px;
	width: 200px;
}

form select {
	background: url('../image/bg-textbox.jpg') repeat-x;
    border: 1px solid #cccccc;
    font-size: 12px;
    padding: 3px;
}

.small {
	font-size: 10px;
}

span.error {
	color: red;
}

input.error {
	background: #ffeeee;
	border: solid 1px red;
}

input.selected {
	background: #FFFFCC;
	border: solid 1px #CC9933;
}
